<template>
  <div>
    <el-table :key="tableKey" :summary-method="getSummaries" show-summary :data="fenyeList" height="450"
      style="width: 100%" :row-class-name="tableRowClassName" :header-cell-style="{ background: '#8cc5ff' }"
      :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="code" label="商品编码" align="center"></el-table-column>
      <el-table-column prop="GMP" label="GMP码" align="center"></el-table-column>
      <el-table-column prop="sender_type" label="供应商代码" align="center"></el-table-column>
      <el-table-column prop="vbillcode" label="单据号" align="center"></el-table-column>
      <el-table-column prop="vbatchcode" label="批号" sortable align="center"></el-table-column>
      <el-table-column prop="vvendbatchcode" label="供应商批号" align="center"></el-table-column>
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="materialspec" label="商品规格" align="center"></el-table-column>
      <el-table-column prop="cunit_name" label="单位"></el-table-column>
      <el-table-column prop="cwarehouse_name" label="仓库名称" align="center"></el-table-column>
      <el-table-column prop="sto_unit_id" label="货位号" align="center"></el-table-column>
      <el-table-column prop="pd_date" label="生产日期" align="center">
        <template #default="{ row }">
          {{ row.pd_date && row.pd_date !== "1900-01-01 00:00:00" ? formatDate(row.pd_date) : "" }}</template>
      </el-table-column>
      <el-table-column prop="exp_date" label="有效期" align="center">
        <template #default="{ row }">
          <!-- 仅当复验期无效或为空时，才显示有效期 -->
          {{ (!row.retest_date || row.retest_date === "1900-01-01 00:00:00")&&(row.exp_date && row.exp_date !== "1900-01-01 00:00:00") ? formatDate(row.exp_date) : "" }}
        </template>
      </el-table-column>

      <el-table-column prop="retest_date" label="复验期" align="center">
        <template #default="{ row }">
          <!-- 仅当复验期有效时才显示 -->
          {{ row.retest_date && row.retest_date !== "1900-01-01 00:00:00" ? formatDate(row.retest_date) : "" }}
        </template>
      </el-table-column>
      <el-table-column label="物料状态" min-width="260">
        <template #default="{ row }">
          <el-descriptions size="mini">
            <el-descriptions-item v-for="item in numItems" :key="item.key" v-if="row[item.key] > 0">
              <template slot="label">
                <span class="label-text">{{ item.label }}</span>
              </template>
              {{ row[item.key] }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column prop="enable_num" label="在途数量" align="center"></el-table-column>
      <el-table-column prop="sku_num" label="实际数量" align="center"></el-table-column>
      <el-table-column prop="freeze_num" label="冻结数量" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        total: 0,
        tableData: [],
        numItems: [{
            key: "unqualified_num",
            label: "不合格",
          },
          {
            key: "quarantine_num",
            label: "待检",
          },
          {
            key: "qualified_num",
            label: "合格",
          },
          {
            key: "limit_eligibility_num",
            label: "限制合格",
          },
          {
            key: "sku_no_state_num",
            label: "无库存状态",
          },
          {
            key: "research_num",
            label: "研究用",
          },
          {
            key: "qualified_no_use_num",
            label: "合格(不上市)",
          },
          {
            key: "pending_num",
            label: "待处理",
          },
        ],
      };
    },
    watch: {
      tableList(newData) {
        this.tableData = newData;
        this.total = newData.length;
      },
    },
    computed: {
      // 根据当前页码和每页条数计算当前页的数据
      fenyeList() {
        const startIndex = (this.pageNum - 1) * this.pageSize;
        return this.tableData.slice(startIndex, startIndex + this.pageSize);
      },
    },
    props: ["tableList", "totalSum", "tableKey","pageSize","pageNum"],
    methods: {
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];

        // 处理空数据情况
        if (data.length === 0) {
          columns.forEach((column, index) => {
            sums[index] = index === 0 ? '合计' : '无数据';
          });
          return sums;
        }

        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (column.property === 'sku_num') {
            const currentPageSum = data.reduce((sum, item) => {
              return sum + (Number(item[column.property]) || 0);
            }, 0);

            // 使用this.totalSum而不是param中的数据
            sums[index] = `当前:${currentPageSum}/总:${this.totalSum || 0}`;
          } else {
            sums[index] = '-';
          }
        });

        return sums;
      },
      // 格式化时间
      formatDate(date) {
        if (!date) return ""; // 如果 `date` 为空或 `null`，返回占位符
        return this.$dayjs(date).isValid() ?
          this.$dayjs(date).format("YYYY-MM-DD") :
          "-";
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        return rowIndex % 2 === 0 ? "warning-row" : "success-row";
      },
    },
  };
</script>
<style scoped>
  /deep/.el-table .warning-row {
    background: #e6f7ff;
  }

  /deep/.el-table .success-row {
    background: ##e0f8e0;
  }
</style>
